// .storybook/stories/WelcomePage.stories.js

import React from "react";

export default {
  title: "Welcome",
  parameters: {
    options: {
      showPanel: false, // 可选：隐藏侧边栏面板以聚焦于欢迎页内容
    },
  },
};

export const CustomWelcome = () => (
  <>
    <div
      style={{
        fontSize: "5vw",
        fontStyle: "italic",
        fontWeight: 600,
        textAlign: "center",
        padding: "60px 0px 30px",
        fontFamily: "Arial Hebrew",
        background: "linear-gradient(45deg, blue, red)",
        backgroundClip: "text",
        color: "transparent",
      }}
    >
      &lt;Coerger Design/&gt;
    </div>
    <h3 style={{ textAlign: "center" }}>
      欢迎来到<code>coerger-design</code>组件库
    </h3>
    <h4 style={{ fontWeight: 600 }}>介绍</h4>
    <p>
      <code>coerger-design</code>是基于<code>React</code>+
      <code>TypeScript</code>
      实现的组件库，目前主要用于学习和实践。
    </p>
    <p>
      随着个人后期不断加强学习，会不断丰富内容，不断优化，也欢迎你来此实践！
    </p>
    <h4 style={{ fontWeight: 600 }}>安装试试，虽然还很简陋</h4>
    <code>npm install coerger-design</code>
    <p>
      gitee地址：
      <a href="https://gitee.com/coerger/coerger-design">
        https://gitee.com/coerger/coerger-design
      </a>
    </p>
  </>
);
